<template>
  <transition name="fade">
    <m-popup type="toast"
      :mask="mask"
      v-show="isVisible">
      <div class="mui-toast__content"
        :class="{'mui-toast__icon':!!icon}">
        <i v-if="!isSvg && icon"
                    :class="classIcon"></i>
        <m-icon v-if="isSvg && icon"
          :type="icon"></m-icon>
        <p v-if="txt"
          :class="classText">{{txt}}</p>
      </div>
    </m-popup>
  </transition>
</template>
<script>
import mPopup from '../popup/popup'
import apiMixin from '../../common/mixins/api'
import mIcon from '../icon'
/**
 * m-toast
 * @param {String} [type='text'] - 提示类型,默认值为'text',仅文本
 * @param {Boolean} [mask=false] - 是否显示遮罩
 * @param {String} [txt=''] - 提示文本, 默认为空
 * @param {Number} [time=2000] - 文本提示时间
 * @param {Function} [callback=null] - 提示文本结束后的回调函数, 默认为null
 */
export default {
  name: 'm-toast',
  mixins: [apiMixin],
  props: {
    type: {
      type: String,
      default: 'text'
    },
    mask: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    isSvg: {
      type: Boolean,
      default: true
    },
    txt: {
      type: String,
      default: ''
    },
    time: {
      type: Number,
      default: 2000
    },
    callback: {
      type: Function,
      default: null
    }
  },
  computed: {
    classIcon() {
      if (this.icon) {
        return [{
          [`mui-icon-${this.icon}`]: !!this.icon,
          'mui-toast__no-text': this.txt.length == 0
        }]
      }
      return ''
    },
    classText() {
      if (this.icon) {
        return 'mui-toast__text'
      } else {
        return 'mui-toast__txt'
      }
    }
  },
  methods: {
    show() {
      this.isVisible = true
      this.clearTimer()
      this.$nextTick(() => {
        if (this.time !== 0) {
          this.timer = setTimeout(() => {
            this.hide()
            if (this.callback !== null) {
              this.callback()
            }
          }, this.time)
        }
      })
    },
    hide() {
      this.isVisible = false
      this.clearTimer()
    },
    clearTimer() {
      clearTimeout(this.timer)
      this.timer = null
    }

  },
  components: {
    mPopup,
    mIcon
  }
}
</script>
<style lang="scss">
@import '../../styles/var.scss';
@import "../../styles/widget/mui-tips/mui-tips";
</style>
